<template>
  <page-meta :root-font-size="fontsize" style="display: block">
    <div class="page resumeDetail" v-if="!!data">
      <xlNavBar :isShare="isShare" bgc="ff9d49"></xlNavBar>
      <!-- <image :src="share.imageUrl" mode="scaleToFill" /> -->
      <!-- <canvas id="my-canvas" width="500" height="400" canvas-id="my-canvas"></canvas> -->
      <canvas
        id="canvas"
        canvas-id="my-canvas"
        :style="{ width: $getStoraged('systemInfo').screenWidth + 'px', height: $getStoraged('systemInfo').screenHeight / 2.22 + 'px' }"
      ></canvas>
      <div class="title">
        <div class="text">{{ $getTitleText(data.job_intention) }}</div>
        <i class="isJj" v-if="data.is_urgent"></i>
      </div>
      <div class="second_info">
        <div class="left">
          <i class="iconfont cya-1Arenyuanyonghu"></i>
          <text>{{ data["name"] }}</text>
        </div>
        <div class="right">{{ data["show_time"] || "暂无时间" }}</div>
      </div>
      <div class="job-search-details">
        <div class="job_title">求职详情</div>
        <div class="jon_content">
          {{ data["content"] }}
        </div>
        <div class="images-list" v-if="imageList">
          <image class="image" @click="preview(index)" v-for="(item, index) in imageList" :key="item" :src="item" mode="aspectFill" />
        </div>
        <span class="city-info">期望城市：{{ data["city_list"] }}</span>
      </div>
      <div class="aqts_wrap">
        <div class="aqts_title_wrap">
          <div class="aqts_title">
            <img class="icon" src="@/static/images/common/aqts.png" alt="" />
            <text>餐饮信息网安全提示</text>
          </div>
          <div class="jb_btn" @click="showjbClick" v-if="isShare != 1">举报</div>
        </div>

        <div class="aqts_content">
          该信息由用户发布，请注意保护个人权益，其真实性、合法性由信息提供者负责，如遇办证收费、刷单、传销、诱导买车等违规行为，请立即向餐饮信息网投诉举报!
        </div>
      </div>
      <div class="more" v-if="isShare == 1">
        <image class="img" @click="goMore" src="@/static/images/common/ckgdyzrc.png" mode="scaleToFill" />
      </div>
      <contactPopup
        :title="contactTitle"
        :btnTetx="contactBtnText"
        :content="contentText"
        @submit="makePhoneCall"
        @close="showContactPopup = false"
        :show="showContactPopup"
      ></contactPopup>
      <contact-popup
        :show="showTip"
        title="温馨提示"
        content="举报成功，在平台核实后将删除该信息，如被多人举报或情节特别恶劣，将会封停该账号。"
        btnTetx="我知道了"
        @submit="know"
      ></contact-popup>
      <center-popup :show="showCenterPopup" :content="centerContentText" @submit="goRecharge" @close="centerPopup = false"></center-popup>
      <pageFooter :type="2" @collects="collects" :data="data" :id="id" :btnList="btnList" @submit="contactEvent"></pageFooter>
      <jbPopup v-if="id && data" :type="1" :userId="data['user_id']" :id="id" @submit="jbSubmit" @cancel="showJbPopup = false" :show="showJbPopup"></jbPopup>
    </div>
  </page-meta>
</template>

<script>
import contactPopup from "@/pages2/components/popup/contactPopup.vue";
import pageFooter from "@/pages2/components/common/pageFooter.vue";
import jbPopup from "@/pages2/components/popup/jbPopup.vue";
import CenterPopup from "@/pages2/components/popup/centerPopup.vue";
export default {
  name: "resumeDetail",
  components: { pageFooter, contactPopup, jbPopup, CenterPopup },
  props: {},
  data() {
    return {
      fontsize: "",
      id: 0,
      $pageName: "求职详情",
      data: null,
      showContactPopup: false,
      showTip: false,
      showCenterPopup: false,
      showJbPopup: false,
      btnList: [
        {
          icon: require("@/static/images/common/sc.png"),
          name: "收藏",
        },
        {
          icon: require("@/static/images/common/share.png"),
          name: "分享",
        },
      ],
      isShare: 0,
      share: {
        title: "求职详情",
        path: "/pages2/resumeDetail?share=1",
        imageUrl: "https://chenxiao.obs.cn-north-1.myhuaweicloud.com/img/13_1680789438427854430.eterYuCrlWYubbb1b3348e59dda8aa3997977bb17a78.jpg",
        desc: "",
        content: "",
      },
      contentText: "",
      contactBtnText: "",
      contactTitle: "",
      centerContentText: "",
      contactInfo: null,
    };
  },
  computed: {
    imageList() {
      if (this.data && this.data["picture_url"]) {
        if (this.data["picture_url"].indexOf(",")) {
          return this.data["picture_url"].split(",");
        } else {
          return [this.data["picture_url"]];
        }
      } else {
        return [];
      }
    },
  },
  methods: {
    showjbClick() {
      this.$checkLogin(() => {
        this.showJbPopup = true;
      });
    },
    async collects(params) {
      this.$checkLogin(async () => {
        params.content_id = JSON.parse(this.id);
        let res = await this.$http.requestSync("/collects/set", params);
        try {
          if (res.code == 200) {
            this.data.is_collect = !this.data.is_collect;
          }
          this.issc = !this.issc;
          this.$layer.message(res.message);
        } catch (error) {
          this.$layer.message(error);
        }
      });
    },
    preview(index) {
      uni.previewImage({
        current: index,
        urls: this.imageList,
      });
    },
    // 变，为/
    togoJoin(str) {
      if (str && str.indexOf(",")) {
        return str.split(",").join("/");
      }
      return str || "";
    },
    goMore() {
      this.$togo("/pages2/findWork", { isPageTitleFind: 2 });
    },
    know() {
      this.showTip = false;
    },
    async getDetail(id) {
      let res = await this.$http.requestSync("/resumes/info/" + id, {}, "GET");
      // let res = await this.$http.requestSync("/jobs/info/45", {}, "GET");
      this.data = res.resume;
      this.share.title =
        "求职：" + res.resume["job_intention"].split(",").join(" ") + " 城市: " + res.resume["city_list"] || res.resume["job_intention"] + " 城市: " + res.resume["city_list"];

      // this.share.imageUrl = await this.$drawPoster(
      //   {
      //     type: "求职",
      //     tag: res.resume.job_intention.split(",") || [res.resume.job_intention],
      //     desc: res.resume.content || "",
      //     address: res.resume.city_list.split(",").join(" ") || res.resume.city_list,
      //   },
      //   this
      // );
    },
    // 联系对方
    async contactEvent() {
      this.$checkLogin(async () => {
        let params = { purpose_id: this.data.id, type: 6 };
        let res = await this.$http.requestSync("/bills/get", params);
        if (res.code == 200) {
          // 用户是否购买过
          // res.data = { integral: 2, user_integral: 20, is_buy: true, phone: "13523829131", is_ok: true };
          //如果用户购买过的话
          if (
            (res.data.phone && this.$getStoraged("systemInfo").platform == "android") ||
            (res.data.phone && this.$getStoraged("systemInfo").platform == "ios") ||
            (res.data.phone && this.$getStoraged("systemInfo").platform == "devtools")
          ) {
            uni.makePhoneCall({
              phoneNumber: res.data["phone"].toString(), //电话号码
            });
            return false;
          } else if (res.data.phone) {
            uni.showModal({
              title: "查看手机号",
              content: res.data["phone"].toString(),
              success: function (res) {
                if (res.confirm) {
                  console.log("用户点击确定");
                } else if (res.cancel) {
                  console.log("用户点击取消");
                }
              },
            });
            return false;
          }
          // 如果用户积分够的话
          if (res.data.is_ok) {
            this.contentText = `您当前剩余${res.data["user_integral"]}积分可用，是否立即与对方联系？`;
            this.contactTitle = `与对方联系需要消耗${res.data["integral"]}积分`;
            this.contactBtnText = `联系对方`;
            this.showContactPopup = true;
          } else {
            this.contactTitle = `温馨提示`;
            this.contactBtnText = `去获取积分`;
            this.contentText = `当前您的积分不足，是否前往获取积分？`;
            this.showContactPopup = true;
          }
          this.contactInfo = res.data;
        }
      });
    },
    // 弹窗确认联系，提示积分
    async makePhoneCall() {
      let that = this;
      if (this.contactInfo) {
        if (this.contactInfo.is_ok) {
          let params = {
            purpose_id: this.data.id,
            type: 6,
          };
          let res2 = await this.$http.requestSync("/bills/buy_phone", params);
          if (res2.code == 200) {
            if (
              (res2.data.phone && this.$getStoraged("systemInfo").platform == "android") ||
              (res2.data.phone && this.$getStoraged("systemInfo").platform == "ios") ||
              (res2.data.phone && this.$getStoraged("systemInfo").platform == "devtools")
            ) {
              uni.makePhoneCall({
                phoneNumber: res2.data["phone"].toString(), //电话号码
              });
              return false;
            } else {
              uni.showModal({
                title: "查看手机号",
                content: res2.data["phone"].toString(),
                success: function (res) {
                  if (res.confirm) {
                    console.log("用户点击确定");
                    that.showContactPopup = false;
                  } else if (res.cancel) {
                    console.log("用户点击取消");
                    that.showContactPopup = false;
                  }
                },
              });
              return false;
            }
          } else {
            that.showContactPopup = false;
            that.$layer.message(res2.message);
          }
        } else {
          if (this.$isIos() == "IOS") {
            this.$togo("/pages3/myIntegral");
          } else {
            this.$togo("/pages3/integralRechargePage");
          }
        }
      } else {
        this.$layer.message("信息有误,请稍后重试");
      }
    },
    async jbSubmit(data) {
      let params = {
        type: 2, //1求职 2 招聘
        reason: data.reason, //选项逗号分隔文字
        content_id: JSON.parse(this.id), //内容id
        complained_user_id: this.data["user_id"], //被投诉人id
        des: data.des, //描述
      };
      let res = await this.$http.requestSync("/report_complaints/create", params);
      this.checkboxValue1 = [];
      try {
        if (res.code !== 200) {
          this.$layer.message("举报失败");
        } else {
          uni.redirectTo({
            url: "/pages/index",
          });
        }
      } catch (error) {
        uni.redirectTo({
          url: "/pages/index",
        });
      }

      this.showJbPopup = false;
      this.showTip = true;
    },
  },

  // 页面周期函数--监听页面加载
  onLoad(options) {
    if (options.params) {
      let params = JSON.parse(decodeURIComponent(options.params));
      this.isShare = 1;
      if (params.shareUserId) {
        this.$setStoraged("shareUserId", params.shareUserId);
        this.isShare = 1;
      }
    }
    if (options.shareUserId) {
      this.isShare = 1;
      this.$setStoraged("shareUserId", options.shareUserId);
    }
    if (options.share) {
      this.isShare = 1;
      this.btnList.unshift({
        icon: require("@/static/images/common/home.png"),
        name: "首页",
      });
    }
    if (options.id) {
      let params = {
        shareUserId: this.$getStoraged("user_id") ? JSON.parse(this.$getStoraged("user_id")) : "",
      };
      this.share.path = `/pages2/resumeDetail?share=1&params=${JSON.stringify(params)}&id=${options.id}`;
      this.id = options.id;
      this.getDetail(options.id);
    } else {
      this.$layer.message("缺少参数，请重新进入");
      this.$back();
    }
    let designWidth = 37.5; //因设计图的宽度
    let that = this;
    //窗体改变大小触发事件
    uni.onWindowResize(res => {
      console.log("变化后的窗口宽度=", res.size.windowWidth);
      //100*屏幕宽度/设计稿宽度
      that.fontsize = Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
      console.log("字体大小：", that.fontsize);
    });

    //打开获取屏幕大小
    uni.getSystemInfo({
      success(res) {
        console.log("设备信息：", res);
        that.fontsize = Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
        console.log("字体大小：", that.fontsize);
      },
    });
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  watch: {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.resumeDetail {
  overflow: hidden;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 56px;
    // line-height: 56px;
    font-size: 20px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    box-sizing: border-box;
    padding: 0 12px;
    .text {
      @include ell();
    }
    .isJj {
      width: 33.69px;
      height: 33.69px;
      background-image: url("@/static/images/common/redjiaji.png");
      background-repeat: no-repeat;
      background-position: right;
      background-size: 100%;
      flex-shrink: 0;
    }
  }

  .second_info {
    height: 17px;
    font-size: 11px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 12px;
    margin: 12px auto;
    .left {
      display: flex;
      align-items: center;
      .iconfont {
        margin-right: 4px;
      }
    }
  }
  .job-search-details {
    width: 100%;
    background: #fff8f0;
    box-sizing: border-box;
    padding: 16px 10px;
    margin: 3px auto 16px;
    .job_title {
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #a8682f;
      margin-bottom: 10px;
    }
    .jon_content {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #a8682f;
      line-height: 22px;
    }
    .images-list {
      margin: 10px auto 0;
      .image {
        width: 81px;
        height: 81px;
        border-radius: 8px;
        margin-right: 10px;
      }
    }
    .city-info {
      height: 30px;
      line-height: 30px;
      padding: 0 6px;
      font-size: 11px;
      background: rgba(255, 136, 34, 0.1);
      border-radius: 3px;
      color: #ff8822;
    }
  }
  .aqts_wrap {
    box-sizing: border-box;
    padding: 0 12px;
    .aqts_title_wrap {
      display: flex;
      justify-content: space-between;
      .aqts_title {
        display: flex;
        align-items: center;
        .icon {
          display: inline-block;
          width: 19px;
          height: 19px;
          margin-right: 4px;
        }
        text {
          font-size: 14px;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
        }
      }
      .jb_btn {
        width: 44px;
        height: 23px;
        background: rgba(253, 136, 34, 0);
        border-radius: 14px 14px 14px 14px;
        border: 1px solid #fd8822;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff8822;
        text-align: center;
        line-height: 23px;
      }
    }

    .aqts_content {
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 19px;
      margin: 10px auto 15px;
    }
  }
  .more {
    width: 100%;
    height: 93px;
    box-sizing: border-box;
    padding: 0 12px;
    .img {
      width: 100%;
      height: 100%;
      display: inline-block;
    }
  }
}
</style>
